<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单盒子模型实例</title>
  <link rel="stylesheet" href="lab3-1.css">
</head>
<body>
  <h3 style="text-align: center;">CSS盒子模型结构展示</h3>
  
  <div class="outer-container">
    <div class="box">
      <div class="label">内容区 (content)</div>
      <div class="label">width: 200px</div>
      <div class="label">height: 150px</div>
    </div>
  </div>
  
  <div style="text-align: center; margin-top: 20px;">
    <p>说明：</p>
    <p>1. 橙色线条：边框 (border) - 5px</p>
    <p>2. 浅蓝色区域与橙色边框之间的空白：内边距 (padding) - 20px</p>
    <p>3. 橙色边框与浅蓝色容器之间的空白：外边距 (margin) - 30px</p>
  </div>
</body>
</html>